<template>
    <div class='fxn-body'>
        <div class="fxn-top">
            <el-button type="primary" icon="Plus">数据导入</el-button>
        </div>
        <!-- Top End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table :loading="loading" :data="listData" :fit="true" :scrollbar-always-on="true">
                <el-table-column prop="id" label="ID" width="80"/>
                <el-table-column prop="id" label="项目归属" />
                <el-table-column prop="id" label="操作人" />
                <el-table-column prop="id" label="更新时间" />
                <el-table-column prop="id" label="数量" />
                <el-table-column prop="id" label="状态" />
                <el-table-column prop="id" label="操作">
                    <template #default="scope">
                        <el-link type="primary" :underline="false">数据下载</el-link>
                        <el-link type="primary" :underline="false">数据更新</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->
        <div class="fxn-page fixed">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 50, 100, 250, 500]" :page-size="perPage" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination>
        </div>
        <!-- Page End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 1,
                perPage: 10,
                type: false,
                loading: false,
                listData: [
                    {id: 1},
                    {id: 2},
                ],
            })

            //列表
            const getList = (page,perPage,type) => {
                state.type = type;
                page = page ? page : 1;
                perPage = perPage ? perPage : 10;
                state.loading = true;
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                state.getList(state.page,state.perPage,state.type);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                state.getList(state.page,state.perPage,state.type);
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                
                //组件方法
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>